<script setup lang="ts">
	import { initBluetoot } from '@/hooks/bluetooth/bluetooth'  
	const { scanBluetooth, deviceList, bindDevice } = initBluetoot()
</script>

<template>
	<view> 
		<view class="searcItem">
			<view class="searchBtn" @click="scanBluetooth">
				搜索设备
			</view> 
		</view> 
		<view class="itemCell">
			<view class="item-page" v-for="item in deviceList" @click="bindDevice(item)">
				<view class="cell"> 
					<view class="title">{{ item.name }}</view>
					<view class="title">{{ item.deviceId }}</view>
				</view>
			</view>
		</view>
	</view>
</template>



<style lang="scss">
	.device_list {
		height: auto;
		margin-bottom: 20px;
		border: 1px solid #EEE;
		border-radius: 5px;
		width: auto;
	}

	.btn {
		margin-top: 25px;
		height: 40px;
		width: 300px;
		line-height: 40px;
	}

	.searcItem {
		position: fixed;
		bottom: 20px;
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.searchBtn {
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		border-radius: 50%;
		background-color: #68BAEA;
		color: #fff;
	}

	.item {
		display: block;
		border-bottom: 1px solid #EEE;
		padding: 4px;
		color: #666;
	}

	.item_hover {
		background-color: rgba(0, 0, 0, .1);
	}

	.itemCell {
		padding: 10px; 
		.item-page {
			border: 1px solid #e8e8e8;
			border-radius: 5px;
			height: 40px;
			margin-bottom: 8px;
			display: flex;
			align-items: center; 
			.cell {
				display: flex;
				margin-left: 5px; 
				.title{
					font-size: 14px;
					line-height: 27px; 
					margin-left: 5px;
				}
			} 
		}
	}
	.image {
		width: 25px;
		height: 25px;
	}
</style>